import React, { useState, useRef, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect, history } from 'umi'
import { queryBehaviorList} from '../service'
import moment from 'moment'
import { Tooltip } from 'antd';

const TableList = () => {
  const actionRef = useRef()
  const columns = [
    {
      title: '开始日期',
      hideInTable: true,
      dataIndex: 'startTime',
      valueType: 'date',
    },
    {
      title: '结束日期',
      hideInTable: true,
      dataIndex: 'endTime',
      valueType: 'date',
    },
    {
      title: '主键',
      dataIndex: 'id',
      key:'id',
      hideInSearch: true
    },
    {
      title: '姓名',
      dataIndex: 'updateUserName',
      key:'updateUserName',
    },
    {
      title: '岗位',
      dataIndex: 'jobName',
      key:'jobName',
    },
    {
      title: '操作ip',
      dataIndex: 'ip',
      key:'ip',
      hideInSearch: true,
    },
    {
      title: '请求参数',
      dataIndex: 'params',
      hideInSearch: true,
      onCell: ()=>{
        return {
          style:{
            maxWidth:200,
            overflow:'hidden',
            whiteSpace:'nowrap',
            textOverflow:'ellipsis',
            cursor:'pointer',
          }
        }
      },
      render: (text) =>{
        return <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
      }
    },
    // {
    //   title: '操作类型',
    //   dataIndex: 'type',
    //   key:'type',
    //   render: (text) => {
    //     const res = operateTypeList.find((item) => item.value === parseInt(text));
    //     return res ? res.label : text
    //   },
    // },
    {
      title: '操作日期',
      dataIndex: 'updateTime',
      hideInSearch: true,
      render: (text) => {
        return text ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      hideInSearch: true,
      onCell: ()=>{
        return {
          style:{
            maxWidth:200,
            overflow:'hidden',
            whiteSpace:'nowrap',
            textOverflow:'ellipsis',
            cursor:'pointer',
          }
        }
      },
      render: (text) =>{
        return <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
      }
    },
  ]

  return (
    <PageHeaderWrapper>
        <ProTable
          actionRef={actionRef}
          rowKey="id"
          request={(params) => queryBehaviorList(params)}
          columns={columns}
        />
    </PageHeaderWrapper>
  )
}

export default connect(() => ({
}))(TableList)
